<template>
  <div ref="chartsRef" class="echarts" />
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { EChartsType } from 'echarts/core';
import { onMounted, ref } from 'vue';
const chartsRef = ref<HTMLElement | null>();

const colorList = ['#46ea91', '#2ba0ff', '#ed593b', '#7357ff', '#f2d750'];
const options = {
  legend: {
    icon: 'circle',
    top: '5%',
    right: '5%',
    itemWidth: 6,
    itemGap: 5,
    textStyle: {
      color: '#fff',
      padding: [3, 0, 0, 0]
    }
  },
  tooltip: { trigger: 'axis' },
  grid: {
    top: '14%',
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8'],
      axisLine: { lineStyle: { color: '#33BBFF' } },
      axisTick: { show: false },
      axisLabel: {
        interval: 0,
        textStyle: { color: '#5FBBEB' },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 10
      },
      axisPointer: {
        label: {
          // padding: [11, 5, 7],
          padding: [0, 0, 0, 0],
          // 这里的margin和axisLabel的margin要一致!
          margin: 10,
          // 移入时的字体大小
          fontSize: 12,
          backgroundColor: 'rgba(0,0,0,0)'
        }
      },
      boundaryGap: false
    }
  ],
  yAxis: [
    {
      name: '单位/件',
      axisTick: { show: false },
      axisLine: {
        show: true,
        lineStyle: { color: '#05D5FF' }
      },
      axisLabel: { textStyle: { color: '#5FBBEB' } },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '咨询',
      type: 'line',
      data: [100, 20, 30, 102, 15, 30, 20, 18],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 2,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: '#90ffc6'
          },
          {
            offset: 1,
            color: '#46ea91'
          }
        ]),
        shadowColor: 'rgba(144, 255, 198, .3)',
        shadowBlur: 5,
        shadowOffsetY: 5
      },
      itemStyle: {
        normal: {
          color: colorList[0],
          borderColor: colorList[0]
        }
      }
    },
    {
      name: '求助',
      type: 'line',
      data: [20, 12, 11, 14, 25, 16, 10, 20],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 2,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: '#67bcfc'
          },
          {
            offset: 1,
            color: '#2ba0ff'
          }
        ]),
        shadowColor: 'rgba(105, 188, 252,.3)',
        shadowBlur: 5,
        shadowOffsetY: 5
      },
      itemStyle: {
        normal: {
          color: colorList[1],
          borderColor: colorList[1]
        }
      }
    },
    {
      name: '无效',
      type: 'line',
      data: [150, 120, 170, 140, 100, 160, 110, 110],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 2,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: '#fc937e '
          },
          {
            offset: 1,
            color: '#ed593b'
          }
        ]),
        shadowColor: 'rgb(252, 147, 126,.3)',
        shadowBlur: 2,
        shadowOffsetY: 2
      },
      itemStyle: {
        normal: {
          color: colorList[2],
          borderColor: colorList[2]
        }
      }
    },
    {
      name: '投诉举报',
      type: 'line',
      data: [200, 80, 100, 30, 60, 50, 110, 20],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 2,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: '#a390ff'
          },
          {
            offset: 1,
            color: '#7357ff'
          }
        ]),
        shadowColor: 'rgba(115, 87, 255, .1)',
        shadowBlur: 5,
        shadowOffsetY: 5
      },
      itemStyle: {
        normal: {
          color: colorList[3],
          borderColor: colorList[3]
        }
      }
    },
    {
      name: '建议',
      type: 'line',
      data: [20, 80, 150, 30, 60, 50, 50, 20],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 2,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: '#ffeb86'
          },
          {
            offset: 1,
            color: '#f2d750'
          }
        ]),
        shadowColor: 'rgba(255, 235, 134, .5)',
        shadowBlur: 5,
        shadowOffsetY: 5
      },
      itemStyle: {
        normal: {
          color: colorList[4],
          borderColor: colorList[4]
        }
      }
    }
  ]
};

let chart: EChartsType;
const initChart = () => {
  const chart = echarts.init(chartsRef.value);
  chart.setOption(options);
  return chart;
};
onMounted(() => {
  chart = initChart();
  window.addEventListener('resize', function () {
    chart && chart.resize();
  });
});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
